<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 时钟</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  // 绘制表盘 ---- 绘制一个圆
  ctx.beginPath();
  ctx.arc(150, 150, 100, 0, 2 * Math.PI);
  ctx.strokeStyle = '#ccc';
  ctx.stroke();

  // 绘制刻度 ---- 12 哥节点
  for (let i = 0; i < 12; i++) {
    const angle = i * Math.PI / 6;
    const x = 150 + 100 * Math.cos(angle);
    const y = 150 + 100 * Math.sin(angle);

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x, y - 10);
    ctx.strokeStyle = '#000';
    ctx.stroke();
  }

  // 绘制指针
  const hour = new Date().getHours();
  const minute = new Date().getMinutes();
  const second = new Date().getSeconds();

  // 绘制时针
  ctx.beginPath();
  ctx.moveTo(150, 150);
  ctx.lineTo(150 + 50 * Math.cos((hour + minute / 60) * Math.PI / 6), 150 + 50 * Math.sin((hour + minute / 60) * Math.PI / 6));
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 4;
  ctx.stroke();

  // 绘制分针
  ctx.beginPath();
  ctx.moveTo(150, 150);
  ctx.lineTo(150 + 70 * Math.cos((minute + second / 60) * Math.PI / 30), 150 + 70 * Math.sin((minute + second / 60) * Math.PI / 30));
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;
  ctx.stroke();

  // 绘制秒针
  ctx.beginPath();
  ctx.moveTo(150, 150);
  ctx.lineTo(150 + 80 * Math.cos(second * Math.PI / 30), 150 + 80 * Math.sin(second * Math.PI / 30));
  ctx.strokeStyle = '#f00';
  ctx.lineWidth = 1;
  ctx.stroke();

  // setInterval(() => {
  //   // 清除画布
  //   ctx.clearRect(0, 0, canvas.width, canvas.height);

  //   // 绘制表盘
  //   ctx.beginPath();
  //   ctx.arc(150, 150, 100, 0, 2 * Math.PI);
  //   ctx.strokeStyle = '#ccc';
  //   ctx.stroke();

  //   // 绘制刻度
  //   for (let i = 0; i < 12; i++) {
  //     const angle = i * Math.PI / 6;
  //     const x = 150 + 100 * Math.cos(angle);
  //     const y = 150 + 100 * Math.sin(angle);

  //     ctx.beginPath();
  //     ctx.moveTo(x, y);
  //     ctx.lineTo(x, y - 10);
  //     ctx.strokeStyle = '#000';
  //     ctx.stroke();
  //   }

  //   // 绘制指针
  //   const hour = new Date().getHours();
  //   const minute = new Date().getMinutes();
  //   const second = new Date().getSeconds();

  //   // 绘制时针
  //   ctx.beginPath();
</script>

</body>
</html>
